import React, { Component } from "react";
import "./App.scss";
import "./icon.css";
class App extends Component {
  getTotalPrice = (params) => {
    let totalPrice = 0;
    this.state.products.map((p) => {
      if (p.checked) {
        totalPrice += p.price * p.num;
      }
      return 1;
    });
    return totalPrice;
  };
  getSelectNum = (params) => {
    let select_num = 0;
    this.state.products.map((p) => {
      if (p.checked) {
        select_num += p.num;
      }
      return 1;
    });
    return select_num;
  };
  state = {
    allChecked: true,
    select_num: 0, //已选商品数
    totalPrice: 0, //总价
    products: [
      {
        id: 1,
        product_title: "男式易打理基础商务衬衫",
        img_url:
          "https://yanxuan-item.nosdn.127.net/0835fdb3091ce7d3ee5d9168794528fe.png?type=webp&imageView&thumbnail=160x0&quality=75",
        price: "86",
        origin_price: 99,
        num: 1,
        checked: true,
      },
      {
        id: 2,
        product_title: "男式易打理基础商务衬衫",
        img_url:
          "https://yanxuan-item.nosdn.127.net/0835fdb3091ce7d3ee5d9168794528fe.png?type=webp&imageView&thumbnail=160x0&quality=75",
        price: "86",
        origin_price: 99,
        num: 1,
        checked: true,
      },
    ],
  };
  handleSub = (index) => {
    console.log("执行handleSub", index);
    let products = this.state.products;
    --products[index].num;
    this.setState({
      products: products,
    });
  };
  handleAdd = (index) => {
    console.log("执行handleAdd", index);
    let products = this.state.products;
    ++products[index].num;
    this.setState({
      products: products,
    });
  };

  handleCheck = (e) => {
    let allChecked = true;
    let { index } = e.currentTarget.dataset;
    console.log(index);
    let products = this.state.products;
    //取反
    products[index].checked = !products[index].checked;
    //判断全选是否需要设置false
    products.map((p) => {
      if (!p.checked) {
        allChecked = false;
      }
    });
    this.setState({
      products: products,
      allChecked,
    });
  };
  //全选逻辑
  handkeAllCheck = (params) => {
    let products = this.state.products;
    let allChecked = !this.state.allChecked;
    products.forEach((p) => {
      p.checked = allChecked;
    });
    this.setState((preState) => {
      return {
        products: products,
        allChecked,
      };
    });
  };
  handlePayCheck = (params) => {
    return this.state.products.some((p) => {
      return p.checked;
    });
  };
  render() {
    return (
      <div className="cart">
        {/* 购物小车列表的开始 */}
        <div className="cart-list">
          {this.state.products.map((p, index) => {
            return (
              <div className="cart-list-item" key={p.id}>
                <div className="list-item-left">
                  <i
                    className={
                      "iconfont" +
                      (p.checked
                        ? " icon-xuanzhong"
                        : " icon-xuanzhongyuandian1")
                    }
                    data-index={index}
                    onClick={this.handleCheck}
                  ></i>
                </div>
                <div className="list-item-mid">
                  <img src={p.img_url} alt="" />
                </div>
                <div className="list-item-right">
                  <div className="item-right-top">{p.product_title}</div>
                  <div className="item-right-bottom">
                    <div className="right-bottom-l">
                      <span className="price">￥{p.price}</span>
                      <span className="origin-price">￥{p.origin_price}</span>
                    </div>
                    <div className="right-bottom-r">
                      <span
                        className="sub"
                        onClick={this.handleSub.bind(this, index)}
                      >
                        -
                      </span>
                      <span className="num">{p.num}</span>
                      <span
                        className="add"
                        onClick={this.handleAdd.bind(this, index)}
                      >
                        +
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* 购物小车列表的结束 */}
        {/* 底部功能区开始 */}
        <div className="cart-func">
          <div className="cart-func-left">
            <i
              className={
                "iconfont " +
                (this.state.allChecked
                  ? " icon-xuanzhong"
                  : "icon-xuanzhongyuandian1")
              }
              onClick={this.handkeAllCheck}
            ></i>
            <span className="check_title">已选({this.getSelectNum()})</span>
          </div>
          <div className="cart-func-right">
            <div className="func-right-l">
              <div className="right-l-top">合计:${this.getTotalPrice()}</div>
              <div className="right-l-bottom">已优惠￥26</div>
            </div>
            <div
              className={
                this.handlePayCheck() ? "func-right-r" : "func-right-disable"
              }
            >
              <span className="order_title">下单</span>
            </div>
          </div>
        </div>
        {/* 底部功能区结束 */}
      </div>
    );
  }
}

export default App;
